<template>
  <uv-navbar :fixed="true" :placeholder="true" leftIcon="" :bgColor="opacity < 1 ? `rgba(255,255,255,${opacity})` : '#fff'">
    <template #left>
      <image class="logo" :src="$CDN('/common/static/images/logo_white.png')" v-if="opacity < 1" />
    </template>
    <template
      #center
      :style="{
        opacity: opacity,
        width: $Platform.platform === 'miniProgram' ? `calc(100% - 30px - ${$Platform.capsule.width}px)` : 'auto',
        margin: '0 15px',
      }"
    >
      <!-- 小程序：搜索框宽度计算 减去 胶囊宽度 和 左右间距 -->
      <Search
        :style="{ opacity: opacity, width: $Platform.platform === 'miniProgram' ? `calc(100% - 30px - ${$Platform.capsule.width}px)` : 'auto', margin: '0 15px' }"
        v-show="opacity >= 1 ? true : false"
      />
    </template>
  </uv-navbar>
</template>

<script>
import Search from './search'

export default {
  name: 'headerNavbar',
  components: { Search },
  mixins: [],
  props: {
    opacity: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {}
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
image.logo {
  width: 206rpx;
  height: 52rpx;
  padding: 12rpx 15rpx;
}
</style>
